import React, { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from '@/store'
import { successInfo } from '@/store/changeCourse'
import Header from '@/components/home/header'
import buyUrl from '@/assets/images/buySuccess.png'
import payUrl from '@/assets/images/pay_success.png'

const ChangeSuccess: FC<{}> = () => {
  const navigate = useNavigate()
  const successInfoNew = useAppSelector(successInfo)
  return (
    <div
      className="w-full h-full bg-white min-h-screen"
      style={{
        backgroundImage: `url(${payUrl})`,
        backgroundSize: '100% auto',
        backgroundRepeat: 'no-repeat',
      }}
    >
      <Header
        cb={() => {
          navigate(-1)
        }}
        notHeaderColor={true}
        headerText={'调课成功'}
      ></Header>
      <div className=" pt-r6.2 pb-r2.2 pl-r1.2 pr-r1.2 h-auto w-full text-center relative">
        <div>
          <img
            alt=""
            className="w-r9.1 h-auto relative left-1/2 transform -translate-x-1/2 "
            src={buyUrl}
          ></img>
          <div className="text-r2.0 leading-r2.0 text-gray-333333 pt-r1.5 font-medium-family">
            调换成功
          </div>
        </div>
        {successInfoNew?.msg && (
          <div className="text-r1.3  mt-r1.6 font-regular text-gray-999999">
            {successInfoNew?.msg}
          </div>
        )}
        <div className="mt-r3.2">
          <span
            onClick={() => {
              navigate('/')
            }}
            className="inline-block text-r1.4 w-r17.0 text-white text-center leading-r4.0 rounded-full  bg-gradient-to-r from-orange-FF664F to-orange-FF3627 "
          >
            去学习
          </span>
        </div>
      </div>
    </div>
  )
}

export default ChangeSuccess
